<template>
	<div class="xtx-city" ref="target">
		<div class="select" @click="toggleDialog" :class="{ show }">
			<span class="placeholder">{{ arr.provincename }} {{ arr.cityname }} {{ arr.countyname }}</span>
			<span class="value"></span>
			<i class="iconfont icon-angle-down"></i>
		</div>
		<div class="option" v-if="show">
			<span class="ellipsis" v-for="(item, index) in sun" :key="index" @click="get(item)">{{ item.name }}</span>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			show: false,
			list: [],
			obj: {
				// 省、
				provincename: null,
				provincecode: null,
				// 市
				cityname: null,
				citycode: null,
				// 县
				countyname: null,
				countycode: null,
			},
			arr: {
				provincename: "北京市",
				cityname: "市辖区",
				countyname: "东城区",
			},
		};
	},
	methods: {
		toggleDialog() {
			if (this.show) {
				this.no();
			} else {
				this.xuan();
				this.off();
			}
		},
		no() {
			this.show = false;
			this.obj = {
				// 省、
				provincename: null,
				provincecode: null,
				// 市
				cityname: null,
				citycode: null,
				// 县
				countyname: null,
				countycode: null,
			};
		},
		off() {
			this.show = true;
		},
		async xuan() {
			if (window.Xuan) {
				this.list = window.Xuan;
			} else {
				let { data } = await this.axios.get("https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json");
				window.Xuan = data;
				this.list = data;
			}
			
		},
		get(item) {
			// console.log(item.areaList[0]);
			if (item.level == 0) {
				this.obj.provincename = item.name;
				this.obj.provincecode = item.code;
			}
			if (item.level == 1) {
				this.obj.cityname = item.name;
				this.obj.citycode = item.code;
			}
			if (item.level == 2) {
				this.obj.countyname = item.name;
				this.obj.countycode = item.code;
				this.arr.provincename = this.obj.provincename;
				this.arr.cityname = this.obj.cityname;
				this.arr.countyname = this.obj.countyname;
				this.no();
			}
		},
	},
	mounted() {
		document.addEventListener("click", (e) => {
			var a = this.$refs.target;
			if (!a.contains(e.target)) {
				this.no();
			}
		});
	},
	computed: {
		sun() {
			let arr = [];
			arr = this.list;
			if (this.obj.provincecode != null) {
				var obj1 = this.list.find((item) => {
					return item.code == this.obj.provincecode;
				});
				arr = obj1.areaList;
                console.log(arr);
			}
			if (this.obj.cityname != null) {
				var obj2 = arr.find((item) => {
					return item.code == this.obj.citycode;
				});
				arr = obj2.areaList;
			}
			// if (this.obj.countycode != null) {
			// 	this.arr.provincename = this.obj.provincename;
			// 	this.arr.cityname = this.obj.cityname;
			// 	this.arr.countyname = this.obj.countyname;
			// }
			return arr;
		},
	},
};
</script>
<style scoped lang="scss">
.xtx-city {
	display: inline-block;
	position: relative;
	z-index: 1;
	.select {
		border: 1px solid #e4e4e4;
		height: 30px;
		padding: 0 5px;
		line-height: 28px;
		cursor: pointer;
		&.active {
			background: #fff;
		}
		.placeholder {
			color: #999;
		}
		.value {
			color: #666;
			font-size: 12px;
		}
		i {
			font-size: 12px;
			margin-left: 5px;
		}
	}
	.option {
		width: 545px;
		border: 1px solid #e4e4e4;
		position: absolute;
		left: 0;
		top: 29px;
		background: #fff;
		min-height: 30px;
		line-height: 30px;
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		> span {
			width: 130px;
			text-align: center;
			cursor: pointer;
			border-radius: 4px;
			padding: 0 3px;
			&:hover {
				background: #f5f5f5;
			}
		}
	}
}
</style>
